<template>
  <div>
    <div>
      <common-title :stitle="alldata.title"/>
    </div>
    <div :id="'ranking' + alldata.itemid" style="height:300px"></div>
  </div>

</template>
<script>
  import * as echarts from 'echarts'
  import commonTitleMixin from '../mixins/commonTitleMixin'

  export default {
    name: 'ranking',
    mixins: [commonTitleMixin],
    props: ['alldata'],
    mounted () {
      this.init()
    },
    methods: {
      init: function () {
        let id = 'ranking' + this.alldata.itemid
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id))
        let option = {
          // title: {
          //   text: alldata.title
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          dataset: {
            source: this.alldata.values
          },
          grid: {
            left: '1%',
            right: '3%',
            top: '3%',
            containLabel: true
          },
          xAxis: {
            boundaryGap: [0, 0.0001]
          },
          yAxis: {
            type: 'category',
            inverse: true,
            /* data:{
              textStyle: {
                color:'#ea7ccc',
                width:10,
                overflow: 'break'
              }
            } */
            // 设置文本过长超出隐藏...表示
            axisLabel: {
              /* show: true, */
              margin: 4,
              fontSize: 12,
              width: 100,
              overflow: 'truncate',
              ellipsis: '...'
              /* formatter:function(params){
                  var val="";
                  if(params.length >7){
                      val = params.substr(0,7)+'...';
                      return val;
                  }else{
                      return params;
                  }
              } */
            }

          },
          series: [
            {
              type: 'bar',
              encode: {
                // 将 "amount" 列映射到 X 轴。
                x: 'amount',
                // 将 "cat" 列映射到 Y 轴。
                y: 'cat'
              },
              itemStyle: {
                color: this.alldata.color
              }
              /* label: {
                show: true,
                width: 4,
                overflow: 'break'
              } */
            }
          ]
          /* textStyle: {
            width: 10,
             overflow: 'truncate'
          } */
        }

        myChart.setOption(option)
      }
    }

  }
</script>

<style scoped>

</style>
